<template>
  <div class="file-item"></div>
  <img
    v-if="item.extName === null || item.extName === ''"
    class="file-img"
    src="@/assets/images/file/dir.png"
    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
    @click="handleFileNameClick(item)"
  />
  <img
    v-if="item.extName === 'doc' || item.extName === 'docx'"
    class="file-img"
    src="@/assets/images/file/file_word.svg"
    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
    @click="handleFileNameClick(item)"
  />
  <img
    class="file-img"
    v-if="item.extName === 'xlsx' || item.extName === 'xls'"
    src="@/assets/images/file/file_excel.svg"
    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
    @click="handleFileNameClick(item)"
  />
  <img
    class="file-img"
    v-if="item.extName === 'ppt' || item.extName === 'pptx'"
    src="@/assets/images/file/file_ppt.svg"
    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
    @click="handleFileNameClick(item)"
  />
  <img
    class="file-img"
    v-if="item.extName === 'png' || item.extName === 'jpg'"
    src="@/assets/images/file/file_png.png"
    :style="`width: ${gridSize}px; height: ${gridSize}px;`"
    @click="handleFileNameClick(item)"
  />

  <div class="file-name" v-html="item.fileName"></div>
</template>
<script setup name="GridItem">
import fileListPinia from "@/store/modules/fileList";

const store = fileListPinia();
const gridSize = computed(() => store.gridSize);
const props = defineProps({
  item: {
    type: Object,
  },
});

function handleFileNameClick(item) {
  if (item.isDir === 1) {
    store.dirId = item.id;
  } else {
    window.open(`${store.lucyUrl}/disk/preview/${item.id}`, "_blank");
  }
}
</script>

<style lang="stylus" scoped>
.file-item {
  margin: 0 16px 16px 0;
  position: relative;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  z-index: 1;

  &:hover {
    background: $tabBackColor;

    .file-name {
      font-weight: 550;
    }
  }

  .file-name {
    margin-top: 8px;
    height: 44px;
    line-height: 22px;
    font-size: 12px;
    word-break: break-all;
    setEllipsis(2);

    >>> .keyword {
      color: $Danger;
    }
  }

  .file-checked-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(245, 247, 250, 0.5);
    width: 100%;
    height: 100%;

    .file-checked {
      position: absolute;
      top: 16px;
      left: 24px;
    }
  }

  .file-checked-wrapper.checked {
    background: rgba(245, 247, 250, 0);
  }
}
</style>